<script setup lang="ts">
import { getPatientOrderAddressAPI } from '@/api/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 地址列表
const addressList = ref<AddressItem[]>([])

// 获取地址列表
const getAddressList = async () => {
  const res = await getPatientOrderAddressAPI()
  addressList.value = res
}

// 选择地址
const onAddressClick = (item: AddressItem) => {
  // 返回上一页并传递数据
  uni.navigateBack({
    success: () => {
      // 向上一页传递选中的地址信息
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      // @ts-ignore
      prevPage.$vm.addressList = item
    },
  })
}

// 新增地址
const onAddAddress = () => {
  uni.navigateTo({ url: '/subpkg_medicine/address/form' })
}

// 每次显示页面都重新获取地址列表
onShow(() => {
  getAddressList()
})
</script>

<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <view class="address-list">
      <view
        class="address-item"
        v-for="item in addressList"
        :key="item.id"
        @tap="onAddressClick(item)"
      >
        <view class="address-info">
          <view class="location">
            {{ item.province }} {{ item.city }} {{ item.county }}
          </view>
          <view class="detail">{{ item.addressDetail }}</view>
          <view class="user">
            {{ item.receiver }}
            {{ item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') }}
            <text class="badge" v-if="item.isDefault">默认</text>
          </view>
        </view>
        <navigator
          class="edit-link"
          hover-class="none"
          :url="`/subpkg_medicine/address/form?id=${item.id}`"
        >
          <uni-icons type="compose" size="16" color="#848484" />
        </navigator>
      </view>
    </view>

    <!-- 添加按钮 -->
    <view class="toolbar">
      <button class="uni-button" @tap="onAddAddress">新增地址</button>
    </view>
  </view>
</template>

<style lang="scss">
.address-page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f6f6f6;
}

.address-list {
  .address-item {
    padding: 30rpx 40rpx 30rpx 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: flex-start;
    
    .address-info {
      flex: 1;
      
      .location {
        font-size: 32rpx;
        margin-bottom: 10rpx;
      }
      
      .detail {
        font-size: 28rpx;
        color: #848484;
        margin-bottom: 10rpx;
      }
      
      .user {
        font-size: 28rpx;
        color: #848484;
        
        .badge {
          display: inline-block;
          padding: 4rpx 10rpx;
          background-color: #E93B3D;
          color: #fff;
          font-size: 24rpx;
          border-radius: 4rpx;
          margin-left: 20rpx;
        }
      }
    }
    
    .edit-link {
      padding: 10rpx;
    }
  }
}

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 40rpx;
  background-color: #fff;
  
  .uni-button {
    background-color: #16C2A3;
    color: #fff;
    
    &:active {
      background-color: darken(#16C2A3, 10%);
    }
  }
}
</style> 